<template>
	<view class="pageView">
		<u-navbar
			title="新增发票抬头"
			:autoBack="true"
			leftIconColor="#333"
		>
		</u-navbar>
		<view class="pageWar">
			<u-icon name="info-circle" color="#0165FB" size="12"></u-icon>
			<view>注意:请仔细核对发票抬头及税号信息，如信息错误将无法开票</view>
		</view>
		<view class="formBlock">
			<u--form
			  labelPosition="left"
				labelWidth="100"
				:model="form"
				:rules="rules"
				ref="uForm"
			>
				<u-form-item
					label="抬头类型"
					prop="name"
					borderBottom
					ref="item1"
				>
					<u-checkbox-group
						v-model="form.name"
						placement="row"
						shape="circle"
						@change="checkboxChange"
					>
						<u-checkbox
							v-for="(item, index) in checkboxList"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-checkbox>
					</u-checkbox-group>
				</u-form-item>
				<u-form-item
					label="发票抬头"
					prop="tai"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.tai"
						border="none"
						placeholder="请输入发票抬头"
					></u--input>
				</u-form-item>
				<u-form-item
					label="税号"
					prop="num"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.num"
						border="none"
						placeholder="如企业开票，请提供相应税号"
					></u--input>
				</u-form-item>
				<u-form-item
					label="开户行"
					prop="kaihu"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.kaihu"
						border="none"
						placeholder="请输入开户行"
					></u--input>
				</u-form-item>
				<u-form-item
					label="银行卡号"
					prop="cardNo"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.cardNo"
						type="number"
						border="none"
						placeholder="请输入银行账号"
					></u--input>
				</u-form-item>
				<u-form-item
					label="注册电话"
					prop="phone"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.phone"
						border="none"
						placeholder="请输入注册电话"
					></u--input>
				</u-form-item>
				<u-form-item
					label="注册地址"
					prop="address"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.address"
						border="none"
						placeholder="请输入注册地址"
					></u--input>
				</u-form-item>
				<u-form-item
					label="收件邮箱"
					prop="email"
					borderBottom
					ref="item1"
				>
					<u--input
						v-model="form.email"
						border="none"
						placeholder="请输入收件邮箱"
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="pageBottom">
			<button>提交</button>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				checkboxList: [
					{
						name: '企业'
					},
					{
						name: '个人/非企业'
					}
				],
				form: {
					name: '企业',
					tai: '',
					num: '',
					kaihu: '',
					cardNo: '',
					phone: '',
					address: '',
					email: ''
				},
				rules: {
					'form.name': {
						type: 'string',
						required: true,
						message: '请选择抬头类型',
						trigger: ['blur', 'change']
					},
					'form.tai': {
						type: 'string',
						required: true,
						message: '请输入发票抬头',
						trigger: ['blur', 'change']
					},
					'form.num': {
						type: 'string',
						required: true,
						message: '请输入税号',
						trigger: ['blur', 'change']
					},
					'form.kaihu': {
						type: 'string',
						required: true,
						message: '请输入开户行',
						trigger: ['blur', 'change']
					},
					'form.cardNo': {
						type: 'number',
						required: true,
						message: '请输入银行账号',
						trigger: ['blur', 'change']
					},
					'form.phone': {
						type: 'number',
						required: true,
						message: '请输入注册电话',
						trigger: ['blur', 'change']
					},
					'form.address': {
						type: 'string',
						required: true,
						message: '请输入注册地址',
						trigger: ['blur', 'change']
					},
					'form.email': {
						type: 'string',
						required: true,
						message: '请输入收件邮箱',
						trigger: ['blur', 'change']
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.pageView{
		height: 100vh;
		background: #f4f4f4;
		.pageWar{
			margin-top: 174rpx;
			padding: 16rpx 22rpx;
			background: #F2F3FF;
			display: flex;
			align-items: center;
			view{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #0165FB;
				padding-left: 8rpx;
			}
		}
		.formBlock{
			padding: 32rpx;
			background: #fff;
		}
		.pageBottom{
			padding: 32rpx;
			background: #fff;
			position: fixed;
			bottom: 0;;
			button{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 690rpx;
				height: 78rpx;
				background: #0165FB;
				border-radius: 68rpx 68rpx 68rpx 68rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: normal;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
</style>